<script setup>
import { useUserStore } from '@/stores/user'
import { getEntryRecordFeedbackApi, uploadEntryRecordFeedbackApi } from '@/api/job'
import { onMounted, ref } from 'vue'
import { showStatusMessage } from '@/utils/common/showMessage'
const userStore = useUserStore()

const entryRecordFeedback = ref([])
// 获取入职记录信息
async function getEntryRecordFeedback() {
  const res = await getEntryRecordFeedbackApi({
    account: userStore.userInfo.account
  })
  // if (res.status === 1) {
    showStatusMessage(res)
  //   return
  // }
  entryRecordFeedback.value = res.data
  console.log(entryRecordFeedback.value);
  
}
getEntryRecordFeedback()
const rate = ref(0)
const desc = ref('')
async function handleSubmit() {
 const res=await uploadEntryRecordFeedbackApi({
    exterpriseAccount: entryRecordFeedback.value.exterpriseAccount,
    studentAccount: userStore.userInfo.account,
    rate: rate.value,
    desc: desc.value,
    jobName:entryRecordFeedback.value.jobName
  })
  showStatusMessage(res)
  getEntryRecordFeedback()

}
// onMounted(() => {
//   var map = new AMap.Map('container', {
//   resizeEnable: true
// })
//   AMap.plugin('AMap.Geolocation', function() {
//   var geolocation = new AMap.Geolocation({
//     // 是否使用高精度定位，默认：true
//     enableHighAccuracy: true,
//     // 设置定位超时时间，默认：无穷大
//     timeout: 10000,
//     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
//     buttonOffset: new AMap.Pixel(10, 20),
//     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
//     zoomToAccuracy: true,     
//     //  定位按钮的排放位置,  RB表示右下
//     buttonPosition: 'RB'
//   })

//   geolocation.getCurrentPosition()
//   AMap.event.addListener(geolocation, 'complete', onComplete)
//   AMap.event.addListener(geolocation, 'error', onError)

//   function onComplete (data) {
//     // data是具体的定位信息
//   }

//   function onError (data) {
//     // 定位出错
//   }
// })
// })
// </script>
<template>
  <div class="onboarding-feedback">
    <div id="container" style="width: 100px; height: 300px;"></div> 
    <div class="onboarding-feedback-title">
      <h1>入职反馈</h1>
    </div>
    <div class="onboarding-feedback-content">
      <!-- 个人信息 -->
      <div class="info-card personal-info animate__animated animate__fadeIn">
        <h2>个人信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">学号：</span>
            <span class="value">{{ userStore.userInfo.studentNumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ userStore.userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">学院：</span>
            <span class="value">{{ userStore.userInfo.college }}</span>
          </div>
          <div class="info-item">
            <span class="label">专业：</span>
            <span class="value">{{ userStore.userInfo.major }}</span>
          </div>
          <div class="info-item">
            <span class="label">班级：</span>
            <span class="value">{{ userStore.userInfo.class }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ userStore.userInfo.gender }}</span>
          </div>
        </div>
      </div>

      <!-- 入职信息 -->
      <div
        class="info-card entry-info animate__animated animate__fadeIn"
        v-if="entryRecordFeedback"
      >
        <h2>入职信息</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">企业名称：</span>
            <span class="value">{{ entryRecordFeedback.enterpriseName }}</span>
          </div>
          <div class="info-item">
            <span class="label">岗位名称：</span>
            <span class="value">{{ entryRecordFeedback.jobName }}</span>
          </div>
          <div class="info-item">
            <span class="label">投递时间：</span>
            <span class="value">{{ entryRecordFeedback.applyTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">面试时间：</span>
            <span class="value">{{ entryRecordFeedback.interviewTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">面试地点：</span>
            <span class="value"
              >{{
                entryRecordFeedback.interviewPlace
                  ? JSON.parse(entryRecordFeedback.interviewPlace).join(' ')
                  : ''
              }}
              {{ entryRecordFeedback.interviewDetailPlace }}</span
            >
          </div>
          <div class="info-item">
            <span class="label">面试官：</span>
            <span class="value">{{ entryRecordFeedback.interviewer }}</span>
          </div>
          <div class="info-item">
            <span class="label">入职时间：</span>
            <span class="value">{{ entryRecordFeedback.entryTime }}</span>
          </div>

          <div class="info-item full-width" v-if="entryRecordFeedback.entryDesc">
            <span class="label">入职描述：</span>
            <span class="value">{{ entryRecordFeedback.entryDesc }}</span>
          </div>
        </div>
        <h2>入职评价</h2>
        <div class="info-grid" style="display: flex; flex-direction: column">
          <div
            class="info-item feedback-section animate__animated animate__fadeInUp"
            style="display: flex; flex-direction: column; justify-content: start"
          >
            <span class="label">入职评价：</span>
            <el-rate
              v-if="entryRecordFeedback.rate"
              v-model="entryRecordFeedback.rate"
              size="large"
              class="feedback-rate"
              disabled
            />
            <el-rate v-else v-model="rate" size="large" class="feedback-rate" />
            <el-input
            style="margin-top: 10px"
              v-if="entryRecordFeedback.desc"
              :value="entryRecordFeedback.desc"
              placeholder="请输入评价"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
              class="animate__animated animate__fadeInUp"
              disabled
            ></el-input>
            <el-input
            style="margin-top: 10px"
              v-else
              v-model="desc"
              placeholder="请输入评价"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 6 }"
              class="animate__animated animate__fadeInUp"
            ></el-input>
          </div>
          <el-button
            type="primary"
            @click="handleSubmit"
            v-if="!entryRecordFeedback.rate || !entryRecordFeedback.desc"
            class="submit-btn animate__animated animate__pulse animate__infinite"
            >点击提交评价</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.onboarding-feedback {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  position: relative;
  overflow: hidden;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.1;
  }

  &::before {
    background: #409eff;
    top: -100px;
    left: -100px;
    animation: float 15s ease-in-out infinite;
  }

  &::after {
    background: #67c23a;
    bottom: -100px;
    right: -100px;
    animation: float 18s ease-in-out infinite reverse;
  }

  &-title {
    text-align: center;
    position: relative;
    z-index: 1;

    h1 {
      font-size: 32px;
      color: #2c3e50;
      position: relative;
      display: inline-block;
      padding: 0 20px;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30px;
        height: 2px;
        background: #409eff;
        transform: translateY(-50%);
      }

      &::before {
        left: -20px;
      }

      &::after {
        right: -20px;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 110%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: #409eff;
        border-radius: 3px;
      }
    }
  }

  &-content {
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 1;
  }

  .info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    h2 {
      font-size: 24px;
      color: #2c3e50;
      margin-bottom: 5px;
      padding-bottom: 15px;
      border-bottom: 2px solid #eef2f7;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 50px;
        height: 2px;
        background: #409eff;
        transition: width 0.3s ease;
      }
    }

    &:hover h2::after {
      width: 100px;
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 5px;
  }

  .info-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(64, 158, 255, 0.1);
      transform: translateX(5px);
    }

    &.full-width {
      grid-column: 1 / -1;
    }

    &.feedback-section {
      background: rgba(64, 158, 255, 0.05);
      border: 2px solid rgba(64, 158, 255, 0.2);
      padding: 20px;
      margin: 10px 0;
      animation: glow 2s ease-in-out infinite alternate;
      
      &:hover {
        background: rgba(64, 158, 255, 0.1);
        border-color: rgba(64, 158, 255, 0.3);
        animation: none;
      }
    }

    .label {
      color: #5c6b7f;
      width: 120px;
      flex-shrink: 0;
      font-weight: 500;
    }

    .value {
      color: #2c3e50;
      flex: 1;
      font-weight: 500;
    }
  }

  .submit-btn {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 16px;
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
      animation: none;
    }
  }

  :deep(.feedback-rate) {
    .el-rate__icon {
      font-size: 32px;
      margin-right: 8px;
      transition: transform 0.3s ease;
      
      &:hover {
        transform: scale(1.2);
      }
    }
    
    .el-rate__text {
      font-size: 18px;
      margin-left: 12px;
    }
  }

  @keyframes glow {
    0% {
      box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
    }
    100% {
      box-shadow: 0 0 20px rgba(64, 158, 255, 0.4);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

// 添加进入动画
.animate__fadeIn {
  animation-duration: 1s;
  &:nth-child(1) {
    animation-delay: 0.2s;
  }
  &:nth-child(2) {
    animation-delay: 0.4s;
  }
}

@media screen and (max-width: 768px) {
  .onboarding-feedback {
    padding: 20px;

    &-content {
      padding: 0 10px;
    }

    .info-grid {
      grid-template-columns: 1fr;
    }

    .info-item {
      padding: 10px;
    }
  }
}
</style>
